import React, {useRef} from 'react';
import {Button, message, Space, Steps} from "antd";
import styled from "@emotion/styled";
import BG from './bg.jpg';
import {FirstStep} from "./FirstStep";
import {SecondStep} from "./SecondStep";
import {ThirdStep} from "./ThirdStep";

interface InstallProp {
    success: (flag: boolean) => void;
}

export const InstallPage:React.FC<InstallProp> = ({success}) => {

    const [current, setCurrent] = React.useState(0);

    const firstRef = useRef<{saveDatabase(): void}>(null!);

    const secondRef = useRef<{saveStorage(): void}>(null!);

    const thirdRef = useRef<{saveUsername(): void}>(null!);

    const next = () => {
        const index = current + 1;
        if (index === 1) {
            firstRef.current.saveDatabase();
        } else if (index === 2) {
            secondRef.current.saveStorage();
        }

    };

    const prev = () => {
        setCurrent(current - 1);
    };

    const successConfig = (flag: boolean) => {
        if (flag) {
            // message.success('系统配置完成')
            success(true)
        }
    }

    return <Container>
        <div className="step-area">
            <Steps current={current}>
                <Steps.Step key={'第一步：配置数据库'} title={'第一步：配置数据库'} />
                <Steps.Step key={'第二步：配置存储源'} title={'第二步：配置存储源'} />
                <Steps.Step key={'第三步：配置账号密码'} title={'第三步：配置账号密码'} />
            </Steps>
            <div className="steps-content">
                <FirstStep isNext={(flag) => setCurrent(flag ? 1 : 0)} innerRef={firstRef} style={{display: current === 0 ? 'inline' : 'none'}} />
                <SecondStep isNext={(flag) => setCurrent(flag ? 2 : 1)} innerRef={secondRef} style={{display: current === 1 ? 'inline' : 'none'}} />
                <ThirdStep isNext={(flag => successConfig(flag))} innerRef={thirdRef} style={{display: current === 2 ? 'inline' : 'none'}} />
            </div>
            <Space className="steps-action" align={'end'}>
                {current === 0 && <Button type={"primary"}>测试链接</Button>}
                {current > 0 && (<Button style={{ margin: '0 8px' }} onClick={() => prev()}>上一步</Button>)}
                {current < 2 && (<Button type="primary" onClick={() => next()}>下一步</Button>)}
                {current === 2 && (<Button type="primary" onClick={() => thirdRef.current.saveUsername()}>完成</Button>)}
            </Space>
        </div>
    </Container>

}

const Container = styled.div`
  width: 100vw;
  height: 100vh;
  background-image: url(${BG});
  background-size: cover;
  
  .step-area {
    border-radius: 5px;
    padding: 20px;
    background-color: #fff;
    width: 55vw;
    height: 60vh;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  .steps-content {
    height: calc(55vh - 138px);
  }
  .steps-action {
    width: 100%;
    justify-content: flex-end;
  }
`
